import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import { Form, Button, Card, message, Modal, Divider, Steps } from 'antd';
import Img from 'react-image';
import DescriptionList from '../../components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { urlParams } from '../../utils/utils';
import globalConstant from '../../utils/globalConstant';
import { add } from '../../utils/images';

const { Description } = DescriptionList;
const { Step } = Steps;

@connect(({ immanage, loading }) => ({
  immanage,
  loading: loading.models.immanage,
}))
@Form.create()
export default class WorkOrdeDetails extends PureComponent {
  state = {
    showDetails: false,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'immanage/getWorkOrderDetail',
      payload: {
        id: urlParams('id', window.location.href),
      },
    });
  }
  handlePass = () => {
    const { dispatch } = this.props;
    const { workOrderInfo } = this.props.immanage;
    Modal.confirm({
      title: '确定完结?',
      content: '确定完结该订单',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'immanage/orderComplete',
          payload: {
            id: this.props.immanage.workOrderInfo.id,
          },
          callback: () => {
            message.success('操作成功');
            this.props.dispatch(routerRedux.push(`/account/workordepass?id=${workOrderInfo.id}`));
          },
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  handleShow = () => {
    this.setState({
      showDetails: !this.state.showDetails,
    });
  }
  render() {
    const { loading } = this.props;
    const { workOrderInfo } = this.props.immanage;
    return (
      <PageHeaderLayout title="未完结装维订单">
        <Card title="" loading={loading} bordered={false} extra={`报装时间：   ${moment(workOrderInfo.createTime).format(globalConstant.time)}`} >
          <DescriptionList size="large" title="订单" style={{ marginBottom: 32 }} col={2}>
            <Description term="报装套餐">{workOrderInfo.packageName}</Description>
            <Description term="姓名">{workOrderInfo.userName}</Description>
            <Description term="报装地址">{workOrderInfo.addrComplete}</Description>
            <Description term="联系电话">{workOrderInfo.userContactPhone}</Description>
            <Description term="类   型">{workOrderInfo.workTypeDesc}</Description>
          </DescriptionList>
          <DescriptionList size="large" title="接单" style={{ marginBottom: 32 }} col={2}>
            <Description term="指派师傅">{workOrderInfo.workerName }</Description>
            <Description term="师傅留言">{workOrderInfo.workServiceDescription }</Description>
            <Description term="接单时间">{moment(workOrderInfo.receiveTime).format(globalConstant.time)}</Description>
            <Description term="完成时间">{moment(workOrderInfo.workerCompleteTime).format(globalConstant.time)}</Description>
            <Description term="">{workOrderInfo.workOrderStatusDesc}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          {
            this.state.showDetails === true ?
            (
              <DescriptionList size="large" title="其他详情" style={{ marginBottom: 32 }} col={2}>
                <Description term="用户ID">{workOrderInfo.userId}</Description>
                <Description term="联系人">{workOrderInfo.userContactName}</Description>
                <Description term="邮箱">{workOrderInfo.email}</Description>
                <Description term="是否付款">{workOrderInfo.payStatusDesc}</Description>
                <Description term="身份证正面">
                  <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoFront} />
                </Description>
                <Description term="身份证反面">
                  <Img style={{ width: 170, height: 90 }} src={workOrderInfo.userIdcardPhotoSide} />
                </Description>
                <Description term="宽带信息">{workOrderInfo.netAccountInfo}</Description>
                <Description term="审核人">{workOrderInfo.checkUserName}</Description>
                <Divider style={{ marginBottom: 32 }} />
                <Steps current={workOrderInfo.step} >
                  {
                    workOrderInfo.stepList && workOrderInfo.stepList.map((item, index) => (
                      <Step key={index.toString()} title={item.name} description={item.value} />
                    ))
                  }
                </Steps>
              </DescriptionList>
            ) : null
          }
          <DescriptionList onClick={() => { this.handleShow(); }} size="large" title="" style={{ float: 'right', marginRight: 50, marginTop: -20 }} col={2} >
            <span style={{ width: 35, padding: 0 }}>{this.state.showDetails === true ? '收起' : '展开'}</span>
            <img style={{ width: 20, padding: 0, marginTop: -5 }} src={add} alt="" />
          </DescriptionList>
          <DescriptionList size="large" title="" style={{ marginBottom: 32, marginTop: 50 }} col={2}>
            <Description term="">
              <Button style={{ width: 150 }} type="primary" onClick={this.handlePass}>
                完结订单
              </Button>
            </Description>
          </DescriptionList>
        </Card>
      </PageHeaderLayout>
    );
  }
}
